<template>
    <transition name="animate__animated " enter-active-class="animate__fadeInUp"
        leave-active-class="animate__fadeOutDown animate__faster">
        <div class="tabbar-box untouchable" id="tabbar-box" v-show="initTabBar">
            <div :class="`tab-item  ${currIndex == index ? 'active' : ''}`" @click="click"
                v-for="(item, index) in tabbar">
                <div :class="`iconfont blog-icon ${item.meta.icon}`" />
                <p class="tab-text">{{ item.meta.mobileTitle || item.meta.title }}</p>
            </div>
            <div class="active-tabbar-box" :style="`--tabIndex:${currIndex};--tabs:${tabs};`" @click="click" />
        </div>
    </transition>
</template>

<script setup>
import router, { route } from "@/router"
import { throttle } from 'lodash-unified'
import { useReady, useElLoading } from "@/hooks"

const tabbar = $computed(() => route.filter(e => e.meta.header && !e.meta.login))
const tabs = tabbar.length
const currIndex = ref(localStorage.getItem("tabIndex") || 0)
const percentTabWidth = (375 / tabs) + "px"
const percentTab = 375 / tabs
const safeAreaBottomHeight = "5px"

let initTabBar = $ref(false)

const { ready, changeReady } = useReady(300)

watch(() => router.currentRoute.value, (currentRoute) => {
    if (!currentRoute.matched.length) return
    const index = tabbar.map(e => e.path).indexOf(currentRoute.path)
    if (index !== -1) currIndex.value = index
    setTimeout(() => {
        initTabBar = true
    })
}, { immediate: true })

watch(currIndex, (value) => {
    localStorage.setItem("tabIndex", value)
})
const calcIndex = (e) => {
    let index = 0
    const x = (e.touches ? e.touches[0] : e).pageX

    for (let i = 0; i < tabs; i++) {
        if (i * percentTab <= x && x <= (i + 1) * percentTab) {
            index = i
            break
        }
    }
    return index
}

const loading = useElLoading({ manual: true, target: ".inner-main", text: "页面正在加载中...", customClass: "untouchable" })
const click = throttle((e) => {
    if (ready.value) {
        changeReady()
        currIndex.value = calcIndex(e)
        const route = tabbar[currIndex.value]
        if (route.path === router.currentRoute.value.path) return
        if (!loading.isloading.value) loading.loading()
        router.push(route)
    }
})

router.beforeResolve(() => {
    loading.close()
})
</script>

<style>
:root {
    --active-tab-bg: orange;
    --per-tab-width: calc(100vw / 5);
    /* tabbar总宽度 */
    --tabbar-width: 100vw;
    /* 菜单选中的圆形背景宽度 */
    --active-tab-width: 50px;
}

.tabbar-box {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    background: rgb(255 255 255 / 50%);
    backdrop-filter: blur(2px);
    width: 100vw;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: v-bind(safeAreaBottomHeight);
    /* padding-bottom: calc(constant(safe-area-inset-bottom) - 14px);
  padding-bottom: calc(env(safe-area-inset-bottom) - 14px); */
    box-shadow: 1px 0px 5px 1px rgba(85, 119, 136, 0.2);
}

.tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 竖向垂直居中 */
    flex-direction: column;
    width: v-bind(percentTabWidth);
    height: 100%;
    position: relative;
}

.tab-item .iconfont {
    font-size: 26px;
    /* 添加过渡效果 */
    transition: all .5s;
}

.tab-item .tab-text {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    position: absolute;
    transform: translateY(80px);
    /* 添加过渡效果 */
    transition: all .5s;
    /* 设置默认不显示 */
    opacity: 0;
}

/* 设置菜单选中样式 */
.tab-item.active .iconfont {
    transform: translateY(-25px) rotate(360deg);
    z-index: 999999999;
}

.tab-item.active .tab-text {
    font-size: 13px;
    opacity: 1;
    transform: translateY(15px);
}

/* 菜单选中圆形样式 */
.active-tabbar-box {
    width: var(--active-tab-width);
    height: var(--active-tab-width);
    background: rgba(241, 198, 198, .8);
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    /* border: 2px solid rgba(181, 184, 180, 0.6); */
    --left-pad: calc(var(--tabbar-width) - (var(--tabs) * v-bind(percentTabWidth)));
    left: calc((var(--left-pad) / 2) + (v-bind(percentTabWidth) /2 - (var(--active-tab-width) / 2)));
    top: -25px;
    z-index: 99999999;
    /* 添加过渡效果 */
    transition: all .2s;
    transition-delay: 50ms;
    /* 设置选中偏移 */
    transform: translateX(calc(v-bind(percentTabWidth) * v-bind(currIndex)));
    /* box-shadow: inset 8px -8px 5px 1px rgba(243, 159, 148, 0.2); */
    /* box-shadow: inset -2px -2px 13px -1px rgba(0, 0, 0, 0.75); */
    /* box-shadow: inset 5px 5px 5px -1px rgba(24, 14, 14, 0.8); */
    box-shadow: 1px 1px 5px 1px rgba(85, 119, 136, .8)
}

.scan-active {
    width: calc(v-bind(percentTabWidth) - 30px);
    margin: 0 15px;
    height: fit-content;
    aspect-ratio: 1;
    background: rgba(241, 198, 198, .5);
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid rgba(181, 184, 180, 0.6);
    --left-pad: calc(var(--tabbar-width) - (var(--tabs) * v-bind(percentTabWidth)));
    left: calc((var(--left-pad) / 2) + (v-bind(percentTabWidth) /2 - (var(--active-tab-width) / 2)));
    top: -13px;
    z-index: 99999999;
    /* 添加过渡效果 */
    transition: all .2s;
    /* 设置选中偏移 */
    transform: translateX(calc(v-bind(percentTabWidth) * v-bind(currIndex)));
}

.tab-item.scan-active .tab-text {
    font-size: 13px;
    opacity: 1;
    transform: translateY(35px);
}

.vc-panel {
    z-index: 999999999 !important;
}

.mobile .el-image-viewer__wrapper {
    bottom: 75px;
}
</style>